<template>
    <div>
        <div class="canshow" v-if="$store.state.login.token !== ''">
            <a-row  style="background-color: #3366cc">
                <a-col :offset="8" :span="3" class="colitem">
                    <router-link class="linkitem" to="/space/info">
                        个人主页
                    </router-link>
                </a-col>
                <a-col :span="3" class="colitem">
                    <router-link class="linkitem" to="/space/exercise">
                        在线练习
                    </router-link>
                </a-col>
                <a-col  :span="3" class="colitem">
                    <router-link class="linkitem" to="/space/rank">
                        排行榜
                    </router-link>
                </a-col>
                <a-col class="linkitem colitem" offset="3" :span="3">
                    {{$store.state.student.student_info==null?'未登录':'你好：'+$store.state.student.student_info.name+'同学'}}
                </a-col>
            </a-row>
        </div>
        <a-alert v-if="$store.state.login.token === ''" message="请先登录" banner />
    </div>
</template>

<script>

    export default {
        name: "HeadBar",
        mounted() {
            const thisState = this.$store.state.login;
            if(thisState.student_id!==''){
                this.$store.dispatch('student/getStudentInfo', {token: thisState.token, studentID: thisState.student_id}).then(
                    res => {
                        if (res == null) {
                            this.$message.error('获取学生信息失败');
                        }
                        if (res.code === 0) {
                            this.$message.error(res.msg);
                        }
                    }
                ).catch(()=>{
                    this.$message.error("网络异常")
                })
            }
        }
    }
</script>

<style scoped>
    .linkitem{
        font-size: 1.2em;
        color: #d1dff3;
    }
    .colitem{
        margin-top: 1.6%;
        margin-bottom: 1.6%;
    }
</style>